<template>
  <div class="bg-white _p-20 _pt-5 _mt-20" style="flex:1">
    <div class="fz-16 title linh-48 disFlxJS">
      <div>报名数据总览</div>
    </div>
    <div class="gridBox">
      <template v-for="item in list">
        <div v-if="item.show" :key="item.label">
          <div>{{ item.label }}</div>
          <div class="fz-24 fw-6 text-dark-900">
            {{ item.value || 0 }}
            <a-icon
              v-if="!disabled && item.label === '报名成功（总）'"
              type="edit"
              class="fz-16 cup"
              @click="openModal"
            />
          </div>
          <NumIncrease :number="item.today"></NumIncrease>
        </div>
      </template>
    </div>

    <a-modal
      v-model="visible"
      title="修改报名数据"
      :maskClosable="false"
      :width="500"
      centered
      okText="确定修改"
      @ok="handleOk"
    >
      <a-form-model
        class="_pt-10"
        ref="form"
        labelAlign="right"
        layout="horizontal"
        :labelCol="{ span: 5 }"
        :wrapperCol="{ span: 12 }"
      >
        <a-form-model-item label="真实报名数:"> {{ info.passedNum }}人 </a-form-model-item>
        <a-form-model-item label="虚拟报名数:">
          <a-input-number v-model="untruePassedNum" :min="0" :precision="0" />
          人
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { activityTypeEnum } from '@/enums/activity'
import NumIncrease from '../components/NumIncrease/index.vue'

export default {
  components: {
    NumIncrease
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    list() {
      return [
        {
          label: '报名人数（总）',
          value: this.info.registerNum,
          today: this.info.todayRegisterNum,
          show: true
        },

        {
          label: '报名成功（总）',
          value: this.info.passedNum + this.info.untruePassedNum,
          today: this.info.todayPassedNum,
          show: true
        },
        {
          label: '报名单位（总）',
          value: this.info.companyNum,
          today: this.info.todayCompanyNum,
          show: true
        },
        {
          label: '已签到（总）',
          value: this.info.signNum,
          today: this.info.todaySignNum,
          show: true
        },
        {
          label: '待审核（总）',
          value: this.info.waitingReviewNum,
          today: this.info.todayWaitingReviewNum,
          show: true
        },
        {
          label: '浏览次数（总）',
          value: this.info.browseNum,
          today: this.info.todayBrowseNum,
          show: true
        },
        {
          label: '浏览人数（总）',
          value: this.info.browsePeopleNum,
          today: this.info.todayBrowsePeopleNum,
          show: true
        }
      ]
    },
    disabled() {
      return this.info.activityType === activityTypeEnum.other_join // 协办方
    }
  },
  data() {
    return {
      visible: false,
      untruePassedNum: 0
    }
  },
  methods: {
    openModal() {
      this.visible = true
      this.untruePassedNum = this.info.untruePassedNum
    },
    handleOk() {
      this.visible = false
      this.$emit('setUntrueNum', this.untruePassedNum)
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  color: #1d2129;
  border-bottom: solid 1px #e5e6eb;
}
.gridBox {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-column-gap: 0.5rem;
  column-gap: 0.5rem;
  grid-row-gap: 2rem;
  row-gap: 2rem;
  text-align: center;
  padding-top: 20px;
}
</style>
